<!DOCTYPE html>
<html lang="en">

    <!--当前页面的设置与配置-->
    <head>
        <!--标题标签-->
        <title>高德地图导航定位</title>
        <!--解析字符编码-->
        <meta charset="UTF-8">
        <!--媒体识别：自动适配移动端：不定义时，统一PC端-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--内联样式-->
        <style rel="stylesheet" type="text/css">
            /*去除正文区域默认的内外间距：全屏*/
            body { margin:0; padding:0; }
            /*地图容器大小：全屏*/
            #container { width:100%; height:100vh; }
        </style>
    </head>

    <!--正文-->
    <body>
        <!--
            前提：
                高德开发者平台：https://lbs.amap.com/
                注册账号，设置应用，配置信息，得到key和security
                我们是html对接，请设置 js格式的API
                开发手册：https://lbs.amap.com/api/javascript-api-v2/summary
                ArkWeb方式，可以绕过鸿蒙操作系统，整合高德地图时，不受语言和系统影响
                key:  c2cc2ba83a6cac607ea25084a940b843
                security:  f6cf95d22f8adfabdffed65360af0519
            其次：
                我们通过 ArkWeb能力，在鸿蒙中使用html实现高德的整合。
                这种方式能绕过操作系统与平台语言的限制。
                具体开发，是这里的：HTML+JavaScript
            整合的原理：
                1、本地html中，定义样式，基础脚本，网页元素
                2、脚本会先下载整个高德地图核心代码到本地
                3、我们通过js，调用这个下载的代码库实现
        -->


        <!--地图呈现的容器-->
        <div id="container"></div>

        <!--设置全局变量-->
        <script type="text/javascript">
            //将密钥设置到全局：后面很多位置的代码以及外部下载的脚本都要用的
            //代码固定，不能修改名字
            //这里是利用：js原型链的对象操作，将指定内容挂载到window对象中
            window._AMapSecurityConfig = {
                securityJsCode: 'f6cf95d22f8adfabdffed65360af0519'
            }
        </script>

        <!--加载官方离线脚本，附加申请的key
            会自动下载你的离线脚本库到本地
        -->
        <script
           type="text/javascript"
           src="https://webapi.amap.com/maps?v=2.0&key=c2cc2ba83a6cac607ea25084a940b843"
        ></script>

        <!--自定义脚本开发-->
        <script type="text/javascript">
            //js是弱语言，解释执行的，这里的代码直接允运行的
            //创建地图对象，进行初始化('绑定的容器', {配置})
            var map = new AMap.Map(
                'container',         //加载地图的网页元素id
                {
                    zoom: 25,                       //初始地图的比例
                    center: [121.474815, 31.237216] //初始地图中心点[经度, 维度]
                }
            )

            //当页面正式加载完毕后
            window.onload = function() {
                //调用鸿蒙应用的方法，获取当前设备定位的经纬度
                window.swift.setCurrentLocation()
            }








        </script>
    </body>

</html>